<template>
    <el-dialog
            width="90%"
            :title="title"
            :visible.sync="visible"
            :before-close="handleClose">
    <div class="pad20">
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="map" size="mini">
                <el-form-item label="商品名称:">
                    <el-input v-model.trim="map.gname"></el-input>
                </el-form-item>
                <el-form-item label="上下架:">
                    <el-select v-model="map.state" class="auto-width" clearable filterable placeholder="上下架" style="width: 85px">
                        <el-option
                                v-for="item in opts.isPutawayList"
                                :key="item.code"
                                :label="item.desc"
                                :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--数据表格-->
        <el-table  size="medium" :data="list" stripe border>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="id" v-if="false" label="商品编号" width="50">
            </el-table-column>
            <el-table-column prop="img" label="商品图片" width="122">
                <template slot-scope="scope">
                    <img :src="scope.row.img" :alt="scope.row.gname" height="48.75" width="100">
                </template>
            </el-table-column>
            <el-table-column prop="gname" label="商品名称" width="180">
            </el-table-column>>
            <el-table-column label="商品分类" align="center" prop="typename">

            </el-table-column>
            <el-table-column label="价格" prop="sellingprice" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.sellingprice !== 0">原价：{{parseFloat(scope.row.sellingprice).toFixed(2)}}<br>优惠价：{{(scope.row.sellingprice*0.8).toFixed(2)}}</span>
                    <span v-else>免费</span>
                </template>
            </el-table-column>
            <el-table-column
                    width="150"
                    prop="state"
                    label="上下架状态"
                    align="center">
                <template slot-scope="scope">
                    <el-tag
                            v-if="scope.row.state===0"
                            type=""
                            size="medium"
                            effect="dark">
                        上架
                    </el-tag>
                    <el-tag
                            v-else
                            type="danger"
                            effect="dark">
                        下架
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <ul class="list-item-actions">
                        <li v-if="scope.row.isAdd == '0' && scope.row.state==0">
                            <el-button type="success" @click="check(scope.row.goodsId,scope.row.id)" size="mini">添加</el-button>
                        </li>
                        <li v-if="scope.row.isAdd == '1'">
                            <el-button type="danger"  size="mini" disabled>已选择</el-button>
                        </li>
                        <li v-if="scope.row.state == 1">
                            <el-link disabled>下架</el-link>
                        </li>
                    </ul>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-pagination
                    background
                    style="float: right;margin-top: 20px; margin-bottom: 22px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="page.pageSize"
                    :page-sizes="[5, 8, 10, 15, 20, 30]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalCount">
            </el-pagination>
        </div>
        <br>
        <br>
    </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "add",
        data() {
            return {
                editor: {},
                dialogVisible: false,
                editVisible: false,
                map: {},
                formData: {},
                list: [],
                opts: {
                    isPutawayList: [{
                        code: 0,
                        desc:"上架"
                    },{
                        code: 1,
                        desc:"下架"
                    }],
                },
                page: {
                    beginPageIndex: 1,
                    currentPage: 1,
                    endPageIndex: 8,
                    pageCurrent: 1,
                    pageSize: 5,
                    totalCount: 0,
                    totalPage: 0
                },
            }
        },
        props: {
            zoneId: {
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ''
            },
        },
        watch: {
            visible: function(val) {
                if (val) {
                    this.map.zoneId=this.zoneId;
                    this.searchCourse()
                }
            }
        },
        methods: {
            handleClose() {
                this.$emit('close-callback')
            },
            // 课程分类分页列表接口
            searchCourse(){
                var that =this
                this.$http.post(`/goods/goodsShop/selectshop/${this.page.pageCurrent}/${this.page.pageSize}`,this.map).then(function (resp) {
                    if (resp.data.code===2000){
                        console.log(resp)
                        that.list = resp.data.data.records
                        that.page.totalCount = resp.data.data.total
                        that.page.pageSize = resp.data.data.size
                    }
                })
            },
            //查询
            handleCheck() {
                this.searchCourse()
            },
            // 重置查询条件
            handleReset() {
                this.reload()
            },
            handleSizeChange(val) {

                this.page.pageSize = val
                this.searchCourse()
            },
            handleCurrentChange(val) {
                this.page.pageCurrent = val
                this.searchCourse()
            },
            // 刷新当前页面
            reload() {
                this.map = {}
                this.formData = {}
                this.searchCourse()
            },
            // 关闭编辑弹窗回调
            closeCllback() {
                this.visible = false;
                this.$refs.formDataRef.resetFields();
                this.reload()
            },
            // 修改弹窗
            handleEdit(row) {

            },
            textClass(isFree) {
                return {
                    c_red: isFree === 0,
                    c_blue: isFree === 1
                }
            },
            check(id,ids){
                var that=this;
                this.$http.post("/index/zoneGoods/addZoneGoods/"+this.zoneId+"/"+id+"/"+ids).then(function (resp) {
                    //console.log(resp)
                    if (resp.data.code===2000){
                        that.$message({
                            message:resp.data.msg,
                            type:"success"
                        })
                    }else{
                        that.$message({
                            message:resp.data.msg,
                            type:"error"
                        })
                    }
                    that.handleClose()
                })
            }
        }

    }
</script>

<style scoped>
    .cancel {
        text-align: right;
    }
    .button {
        padding: 5px 10px;
    }
</style>
